<template>
  <div class="page">
    <div class="loginModule">
      <van-cell-group :border="false">
        <p class="title">Email <van-icon name="star" /></p>
        <van-field class="loginM-input-box" v-model="params.uemail" clearable />
        <p class="title">Password <van-icon name="star" /></p>
        <van-field
          class="loginM-input-box"
          v-model="params.upasswd"
          :type="passwordtype"
          :right-icon="showpsd"
          @click-right-icon="clickEye"
        />
      </van-cell-group>

      <div class="loginBtn" :class="{active:btnstatu}" @click="login">LOGIN</div>
      <a class="loginM-foget" :href="'tel:'+phoneNum">Forgot Password?</a>
      <p class="loginM-register">
        Dont’t have an account yet?
        <router-link class="a" to="/register">Register Now</router-link>
      </p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { getnewsDetail } from "../../api/sort";
import { login } from "../../api/user";
import utils from "../../assets/js/util";
import loginMinin from "../../mixin/login";
export default {
  data() {
    return {
      showpsd: "closed-eye",
      passwordtype: "password",
      isLogin: false, //是否登录
      isClick: false, //防止多次点击
      btnstatus: false, //不可点击
      phoneNum: this.$store.state.nocaches.kefuphone,
  
    };
  },
  mixins: [loginMinin],
  computed: {
    btnstatu() {
      if (this.params.uemail != "" && this.params.upasswd != "") {
        this.btnstatus = true;
        return true;
      } else {
        this.btnstatus = false;
        return false;
      }
    }
  },
  methods: {
    login() {
      if (!this.btnstatus) {
        this.$toast("Email/password shouldn't be empty");
        return;
      }
      if (!this.params.uemail) {
        this.$toast("Mailbox shouldn't be empty");
        return false;
      }
      if (!this.params.upasswd) {
        this.$toast("The password shouldn't be empty");
        return false;
      }
      this.isClick = true;
      login(this.params).then(res => {
        this.isClick = false;
        if (res.code == "0000") {
          this.$store.dispatch("acLoginInfor", res.data);
          this.$store.commit("muLoginQuery", this.params);
          let path = this.$route.query.path;
          if (path) {
            this.$router.push({ path: path });
          } else {
            this.$router.push({ path: "/" });
          }
        } else {
          this.$toast(res.msg);
        }
      });
    },
    clickEye() {
      // 条件判断  ？ A(是) ： B(否)   并返回值
      //  this.showpsd = this.showpsd== "eye-o" ? 'closed-eye' :"eye-o";
      //  this.passwordtype = this.showpsd== "eye-o" ? 'closed-eye' :"eye-o";
      if (this.showpsd == "eye-o") {
        this.showpsd = "closed-eye";
        this.passwordtype = "password";
      } else {
        this.showpsd = "eye-o";
        this.passwordtype = "text";
      }
    }
  }
};
</script>
<style scoped lang="less">
@import url("./form.css");
.page {
  min-height: 100%;
  background: rgba(242, 245, 250, 1) url("../../assets/img/login.png") no-repeat;
  background-size: contain;
  background-position-y: 44px;
  padding: 1rem 0.3rem 0;
  color: #0076ff;
  position: absolute;
  top: 0;
}

.loginModule {
  padding: 0.5rem 0.3rem 0;
  position: relative;
  top: 2.6rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 16px 0px rgba(204, 204, 204, 0.2);
  border-radius: 8px;
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 0.02rem;
    background: rgba(236, 236, 237, 1);
    position: absolute;
    left: 0;
    bottom: 1rem;
  }
}
</style>
